今天來把 Array 常用的方法介紹完~

Array

ES6 延展

依序 return 陣列每個值

對，你沒看錯，就是要在陣列前面加上 3 個點 => ...

var a = [1, 2, 3];
console.log(...a); // 1 2 3

故可以使用此種寫法改寫上方的陣列合併

var a = ['a', 'b', 'c'];
var b = ['d', 'e', 'f'];
var c = [...a, ...b];
console.log(c) // ["a", "b", "c", "d", "e", "f"]

深拷貝

和物件一樣，Array 也是傳參考，如果想要實現陣列的深拷貝，可以使用 ES6 延展快速實現，因為它和手動取值一樣，依序取出陣列的值。

var a = [1, 2, 3];
var b = [...a];
b.push(4);

console.log(a); // [1, 2, 3]
console.log(b); // [1, 2, 3, 4]

PS. 關於深拷貝/淺拷貝之後會有更詳細的介紹，這邊看不懂可以去 google 或是等日後的文章。

類陣列

類陣列: 結構與陣列幾乎一樣，但是能夠使用 __proto__ 中的函數較少。

var myLi = document.querySelectorAll("li");
console.log(myLi);

正常 Array

var test = [1, 2, 3];
console.log(test);

套用延展特性，可以使類陣列轉為正常陣列

var myLi = document.querySelectorAll("li");
var newLi = [...myLi];
console.log(newLi);

實際應用

Day6 中有提到，JS 函數中，若傳入未定義的參數，實際上還是會透過 arguments 變數存起來(有定義的參數也會存進)。

function printVar(){
    var arg = arguments;
    console.log(arg); // [10, 20, 30]
}
printVar(10, 20, 30);

而聰明的你一定會想到，沒錯，這個 arguments 也是類陣列，沒有辦法使用太多的方法，像是加總(reduce)，那解決方法也是透過上方的延展來轉換。

function totalCal() {
  let arg = [...arguments];
  let sum = arg.reduce(function (val, item) {
    return val + item;
  }, 0);
  console.log('Total: ' + sum);
}
totalCal(10, 20, 30); // Total: 60

其餘參數

此處介紹的其餘參數和上方 arguments 概念類似，但 arguments 是將所有傳入函數的參數存起來，不論那些參數有沒有定義，而其餘參數則是存放沒有定義的參數而已。

此範例結果乍看之下和 arguments 差不多，

function printVar(...data) {
  console.log(data);
}
printVar(10, 20, 30); // [10, 20, 30]

但是改成這樣，就發現 apple 是傳入有定義的參數 name，而其餘未定義的參數則被放入 data 中。

function printVar(str, ...data) {
  console.log(str, data);
}
printVar("apple", 10, 20, 30); // apple, [10, 20, 30]

解構賦值

Case1. 取陣列值

這樣的場景有沒有似曾相似...

var myArr = ['apple', 'banana', 'orange'];
var first = myArr[0]; // apple
var second = myArr[1]; // banana
var third = myArr[2]; // orange

現在不用再這麼麻煩了，左邊變數數量小於等於右數陣列長度就好。

var myArr = ['apple', 'banana', 'orange'];
var [first, second, third] = myArr; // apple, banana, orange

如果想要跳過某一個值，可以改成這樣

1. 想要跳過的變數直接留空
2. 此處即不想設變數接收orange的值

var myArr = ['apple', 'banana', 'orange', "dog", "cat"];
var [first, second, , third] = myArr; // apple, banana, dog

Case2. 兩數交換

蛤，上面的場景你沒見過?
那這個呢...

var a = 123;
var b = 456;
var tmp = a;
a = b;
b = tmp;

一樣，可以直接改成簡潔有力的寫法

var a = 123;
var b = 456;
[a, b] = [b, a];
// a: 456
// b: 123

那今天的分享就到這，我們明天見